<template>
    <div class="page">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-tag"></i> 成绩录入</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div v-if="!authorize">
                <div class="error-code">4<span>0</span>2</div>
                <div class="error-desc">{{ tips }}</div>
            </div>
            <div v-if="authorize">
                <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column prop="course_id" label="ID" width="55" align="center"></el-table-column>
                    <el-table-column prop="course_name" label="课程名" width="200"></el-table-column>
                    <el-table-column prop="course_nature" label="课程类型" width="100">
                        <template slot-scope="scope">
                            <el-tag type="info">{{ scope.row.course_nature }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="is_commit_grade" label="是否提交" width="100">
                        <!-- 0 未提交 1 已提交 -->
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.is_commit_grade == 0 ? 'warning' : 'success'">
                                {{ scope.row.is_commit_grade == 0 ? '未提交' : '已提交' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="no_entry_number" label="未录人数" width="100"></el-table-column>
                    <el-table-column prop="total_number" label="总人数" width="100"></el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.is_commit_grade === 0" type="primary" icon="el-icon-postcard" @click="handleInput(scope.$index, scope.row)">录入</el-button>
                            <el-button v-if="scope.row.is_commit_grade === 1" type="success" icon="el-icon-lx-tag" @click="handleViewStudents(scope.$index, scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { getRequest, postRequest } from '@/api/index';

export default {
    name: 'GradeInput',
    components: {},
    data() {
        return {
            authorize: true,
            tips: '该页面暂未开放, 请联系管理员',
            tableData: []
        };
    },
    created() {
        this.checkIsOpen();
        // 如果开放
        if (this.authorize) {
            this.getCourses();
        }
    },
    methods: {
        checkIsOpen() {
            getRequest('/login/teacher/grade/check_entry').then(
                res => {
                    console.log(res);
                    let code = res.code;
                    if (code == 402) {
                        this.authorize = false;
                    } else if (code == 200) {
                        if (res.data == 0) {
                            this.authorize = false;
                        } else {
                        }
                    } else {
                        this.authorize = false;
                    }
                },
                err => {}
            );
        },
        // 获取需要打分的课程
        getCourses() {
            getRequest('/login/teacher/grade/get_tea_course_grade').then(
                res => {
                    console.log(res);
                    if(res.code == 200) {
                        this.tableData = res.data;
                    }
                },
                err => {}
            );
        },
        handleInput(index, row) {
            this.$router.push({path: '/grade/manage', query: {courseId: row.course_id}})
        },
        handleViewStudents(index, row) {
            this.$router.push({path: '/grade/manage', query: {courseId: row.course_id, is_commit: row.is_commit_grade}});
        }
    }
};
</script>

<style scoped>
.container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.error-code {
    line-height: 1;
    font-size: 250px;
    font-weight: bolder;
    color: #f02d2d;
}
.error-code span {
    color: #00a854;
}
.error-desc {
    font-size: 30px;
    color: #777;
}
</style>
